<div class="pac-page-body-toolbar">
  <ngm-search [(ngModel)]="search" />

  <div class="flex justify-start items-center gap-4">
    <label class="shrink-0 whitespace-nowrap">{{ 'PAC.KEY_WORDS.Role' | translate: {Default: 'Role'} }}:</label>
    <mtx-checkbox-group [items]="ROLES" [(ngModel)]="roles" />
  </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  @for (user of users$ | async; track user.id) {
    <div class="group flex flex-col px-2 py-3 border-[0.5px] border-solid border-gray-200 rounded-xl shadow-sm bg-gray-50 hover:bg-white hover:shadow-lg">
      <pac-user-profile-inline [user]="user" [routerLink]="['/settings/users/', user.id]" class="cursor-pointer"/>
      <div class="p-2 flex justify-start items-center">
        @if (user.role; as role) {
          <span class="mr-2 text-text-secondary">{{'PAC.KEY_WORDS.Role' | translate: {Default: 'Role'} }}:</span>
          <span class="text-xs inline-flex items-center font-bold leading-sm uppercase px-2 py-1 rounded-lg"
            [ngClass]="{
              'bg-blue-100 text-blue-500': role.name === 'VIEWER',
              'bg-yellow-100 text-yellow-500': role.name === 'ADMIN',
              'bg-red-100 text-red-500': role.name=== 'SUPER_ADMIN',
              'bg-green-100 text-green-500': !['VIEWER', 'ADMIN', 'SUPER_ADMIN'].includes(role.name)
            }"
          >
            {{role.name}}
          </span>
        } @else {
          <span class="text-text-secondary">{{'PAC.USERS_PAGE.NoRole' | translate: {Default: 'No Role'} }}:</span>
        }
      </div>

      <div class="flex justify-end items-end">
        <button type="button" class="w-6 h-6 flex justify-center items-center rounded-full opacity-0 group-hover:opacity-100 hover:bg-gray-100"
          [cdkMenuTriggerFor]="menu"
          [cdkMenuTriggerData]="{user: user}"
        >
          <i class="ri-more-line"></i>
        </button>
      </div>
    </div>
  }
</div>

<ng-template #menu let-user="user">
  <div cdkMenu class="cdk-menu__large">
    <button cdkMenuItem [routerLink]="['/settings/users/', user.id]">
      <i class="ri-pencil-line mr-1"></i>
      <span>{{ 'PAC.ACTIONS.Edit' | translate: {Default: "Edit"} }}</span>
    </button>

    <button cdkMenuItem class="danger" (click)="remove(user)">
      <i class="ri-delete-bin-line mr-1"></i>
      <span>{{ 'PAC.ACTIONS.Delete' | translate: {Default: "Delete"} }}</span>
    </button>
  </div>
</ng-template>
